import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Select, Space, DatePicker, Button } from 'antd';
import moment from 'moment';
import { connect } from 'umi';

import { FullscreenOutlined } from '#/utils/antdIcons';
import { Pointer } from '@/components';
import {
  tenDaysTypeOptions,
  // kLineOptions,
  continuousAverageOptions,
  tenDaysSecondsOptions,
  dateTimeorderOptions,
} from '../../../../constant.js';
import MyDrawer from '../MyDrawer';

const { RangePicker } = DatePicker;
const dateFormat = 'YYYYMMDD';

export const PointSearch = (props) => {
  const {
    topType = 0,
    date = [moment(), moment()],
    title,
    ModalComponent,
    marketList,
    marketId,
    provinceId,
    remSize,
    onChange,
    disable,
    unitId,
    buttonPermissions,
    steamCoalOptions,
  } = props;
  const [point, setPoint] = useState('24'),
    [dateRange, setDateRange] = useState([
      moment(date[0], dateFormat),
      moment(date[1], dateFormat),
    ]),
    [tenDaysType, setTenDaysType] = useState('旬'),
    [continuousAverage, setContinuousAverage] = useState('连续'),
    // [kLine, setKLine] = useState('月K'),
    [steamCoal, setSteamCoal] = useState('焦炭主力'),
    [tenDays, setTenDays] = useState('1-10'),
    [tenDaysOptions, setTenDaysOptions] = useState([]),
    [month, setMonth] = useState(moment()),
    [dateTimeorderType, setDateTimeorderType] = useState('日期'),
    [open, setOpen] = useState(false); //dataRange日期切换
  useEffect(() => {
    onMonthChange();
  }, []);
  useEffect(() => {
    if (!provinceId || !unitId) return;
    switch (topType) {
      case 0:
        onChange({
          tenDaysType,
          month,
          tenDays,
          point,
        });
        break;
      case 1:
        onChange({
          point,
          date: dateRange,
        });
        break;
      case 2:
        onChange({
          continuousAverage,
          point,
          date: dateRange,
        });
        break;
      case 3:
        onChange({
          // kLine,
          steamCoal,
        });
        break;
      case 4:
        //山东省 长周期电价
        onChange({
          dateTimeorderType,
          date: dateRange,
          point,
        });
        break;
    }
  }, [
    month,
    tenDays,
    // kLine,
    steamCoal,
    continuousAverage,
    point,
    open,
    dateTimeorderType,
  ]); //open 代替dateRange
  const showModal = async () => {
    if (!disable) return;
    const result = await MyDrawer.show({
      title,
      MyComponent: (props) => (
        <ModalComponent
          {...props}
          {...{
            marketList,
            marketId,
            provinceId,
            remSize,
            tenDaysType,
            month,
            unitId,
            dateTimeorderType,
            tenDays,
            point,
            continuousAverage,
            // kLine,
            steamCoal,
            steamCoalOptions,
            buttonPermissions,
          }}
          date={dateRange}
        />
      ),
    });
    if (result?.index === 1) {
    }
    MyDrawer.dismiss();
  };

  const onMonthChange = (val) => {
    setTenDays('1-10'); //默认上旬
    // 不同月份的天数可能是28、29、30或31天
    tenDaysSecondsOptions[2].label = `21-${moment(val).daysInMonth()}日`;
    tenDaysSecondsOptions[2].value = `21-${moment(val).daysInMonth()}`;
    setTenDaysOptions(tenDaysSecondsOptions);
  };
  return (
    <div className={styles.cell}>
      <div className={styles.title}>{title}</div>
      <Space size={[16, 0]}>
        {topType === 0 ? (
          <>
            <Pointer
              className={styles.font}
              options={tenDaysTypeOptions}
              data={tenDaysType}
              onChange={(e) => {
                setTenDaysType(e.target.value);
                e.target.value === '月' ? setTenDays(null) : onMonthChange(month);
              }}
            />
          </>
        ) : (
          ''
        )}
        {topType === 4 ? (
          <Pointer
            className={styles.font}
            options={dateTimeorderOptions}
            data={dateTimeorderType}
            onChange={(e) => {
              setDateTimeorderType(e.target.value);
            }}
          />
        ) : (
          ''
        )}
        {topType === 0 || topType === 1 || topType === 2 ? (
          <Pointer
            className={styles.font}
            data={point}
            onChange={(e) => {
              setPoint(e.target.value);
            }}
          />
        ) : (
          ''
        )}
        {topType === 3 ? (
          // <Pointer
          //   className={styles.font}
          //   options={kLineOptions}
          //   data={kLine}
          //   onChange={(e) => {
          //     setKLine(e.target.value);
          //   }}
          // />
          <Select
            value={steamCoal}
            style={{ width: 260 }}
            options={steamCoalOptions}
            showSearch={false}
            showArrow={true}
            onChange={(e, option) => {
              setSteamCoal(option?.label);
            }}
          />
        ) : (
          ''
        )}
        {topType === 0 ? (
          <DatePicker
            value={month}
            className={`${styles.font} ${styles.month}`}
            allowClear={false}
            onChange={(e) => {
              setMonth(e);
              onMonthChange(e);
            }}
            format={'YYYYMM'}
            picker="month"
          />
        ) : (
          ''
        )}
        {topType === 0 && tenDaysType === '旬' ? (
          <Select
            className={styles.font}
            style={{ width: 110 }}
            options={tenDaysOptions}
            value={tenDays}
            onChange={setTenDays}
          />
        ) : (
          ''
        )}
        {topType === 2 ? (
          // 连续\平均控制
          <>
            <Pointer
              className={styles.font}
              options={continuousAverageOptions}
              data={continuousAverage}
              onChange={(e) => {
                setContinuousAverage(e.target.value);
              }}
            />
          </>
        ) : (
          ''
        )}
        {topType === 1 || topType === 2 || topType === 4 ? (
          <RangePicker
            className={`${styles.font} ${styles.range}`}
            value={dateRange}
            onChange={setDateRange}
            allowClear={false}
            format={dateFormat}
            separator={'-'}
            onOpenChange={(e) => {
              if (!e) {
                setOpen(!open);
              }
            }}
          />
        ) : (
          ''
        )}
        <Button
          type="link"
          disabled={!disable}
          onClick={showModal}
          icon={
            <FullscreenOutlined
              style={{
                fontSize: 12,
                marginRight: 8,
                borderRadius: 2,
              }}
            />
          }
        >
          详情
        </Button>
      </Space>
    </div>
  );
};

const mapStateToProps = ({ mediumAndLongTermMarket }) => ({
  marketList: mediumAndLongTermMarket.marketList,
  marketId: mediumAndLongTermMarket.marketId,
  provinceId: mediumAndLongTermMarket.provinceId,
});

const mapDispatchToProps = (dispatch) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(PointSearch);
